<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div id="vuebox">
        <!--分类-->
        <div class="row">
            <div class="col-md-6 col-lg-6">
                <form class="form-inline" role="form" style="padding-left: 250px;">
                    <div class="form-group" style="padding-left: 20px;">
                        <label>按区域查询:</label>
                        <select class="form-control" v-model="districtid">
                            <option value="0">全部</option>
                            <option v-for="item in districtlist.data" :value="item.id">{{item.name}}</option>
                        </select>
                    </div>
                    <div class="form-group"  style="padding-left: 20px;">
                        <button type="button" class="btn btn-primary" @click="selbtn()">查询</button>
                    </div>

                </form>
            </div>
            <div class="col-md-6 col-lg-6 text-right">
                <a href="javascript:void(0)" @click="openAdd()" class="btn btn-primary">添加空气质量信息</a>
            </div>
        </div>
        <!--图书列表-->
        <div class="row">
            <div class="col-md-12" v-if="airlist.data.size">
                <br/>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>区域</th>
                        <th>监测时间</th>
                        <th>PM10数据</th>
                        <th>PM2.5数据</th>
                        <th>监测站</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in airlist.data.list" >
                        <td><a href="javascript:void(0)" style="color: black" @click="del(item.id)">{{item.id}}</a></td>
                        <td><a href="javascript:void(0)" @click="openUpdate(item.id,item.districtid,item.monitortime,item.pm10,item.pm25,item.monitoringstation)">{{item.name}}</a></td>
                        <td>{{item.monitortime|formatDate}}</td>
                        <td>{{item.pm10}}</td>
                        <td>{{item.pm25}}</td>
                        <td>{{item.monitoringstation}}</td>
                    </tr>
                    </tbody>
                </table>
                <br/>
            </div>
            <div class="col-md-12 text-center" v-if="!airlist.data.size">
                <h1>抱歉,没有查询到数据</h1>
            </div>
        </div>
        <!--上一页下一页-->
        <div class="row">
            <div class="col-md-12" align="center">
                <ul class="pagination ">
                    <li v-show="airlist.data.hasPreviousPage"><a href="javascript:void(0)" @click="prev()">&laquo;</a></li>
                    <li :class="{active:airlist.data.pageNum==i}" v-for="i in airlist.data.navigatepageNums">
                        <a href="javascript:void(0)"  @click="inpage(i)">{{i}}</a>
                    </li>
                    <li v-show="airlist.data.hasNextPage"><a href="javascript:void(0)" @click="next()">&raquo;</a></li>
                </ul>
            </div>
        </div>
        <!-- 添加模态框-->
        <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">添加</h4>
                    </div>
                    <div class="modal-body">
                        <label>监测区域:</label>
                            <select  v-model="air.districtid">
                                <option value="0">全部</option>
                                <option v-for="item in districtlist.data" :value="item.id">{{item.name}}</option>
                            </select><br/>
                        <label>监测日期:</label>
                        <input type="text" class="form-control" v-model="air.monitortime" id="time"/><br/>
                        <label>PM10值:</label>

                        <input type="number" class="form-control" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="8" v-model="air.pm10"/><br/>
                        <label>PM2.5值:</label>
                        <input type="number" class="form-control" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="8" v-model="air.pm25"/><br/>
                        <label>监测站:</label>
                        <input type="text" class="form-control" v-model="air.monitoringstation"/><br/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"  @click="add()">关闭</button>
                        <a href="#" class="btn btn-primary" @click="add()">提交更改</a>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            pageNum:1,
            pageSize:2,
            pagelist:1,//页数
            districtid:0,//分类编号
            districtlist:[],//分类集合
            airlist:[],
            air:{id:null,districtid:0,monitortime:"2020-01-04",pm10:0,pm25:0,monitoringstation:""}
        },mounted() {
            axios.post("/getSelectDistrict").then(res => {this.districtlist = res.data});
            this.queryAll();
        },methods:{
            queryAll:function () {
                axios({url:"/getSelectAirBydisid", method:"post", params:{districtid:this.districtid, pageNum:this.pageNum, pageSize:this.pageSize}}).then(res=>{this.airlist=res.data})
            },
            prev:function () {//上一页
                this.pageNum +=-1;
                this.queryAll();
            },
            next:function () {//下一页
                this.pageNum+=+1;
                this.queryAll();
            },
            inpage:function (i) {//页数跳转
                this.pageNum=i;
                this.queryAll();
            }
            ,
            selbtn:function () {
                this.queryAll();
            },
            openAdd:function () {
                this.air={id:null,districtid:0,monitortime:null,pm10:0,pm25:0,monitoringstation:""}
                $("#AddModal").modal("show");
            },
            openUpdate:function (id,districtid,time,pm10,pm25,monitoringstation) {
                this.air={id:id,districtid:districtid,monitortime:formatDateTime(time),pm10:pm10,pm25:pm25,monitoringstation:monitoringstation}
                $("#AddModal").modal("show");

            },
            del:function (id) {
                if(confirm("确定要删除吗？")){
                    axios({
                        url:"/delAirByid",
                        method:"post",
                        params:{id:id}
                    })
                        .then()
                    this.queryAll();
                    return false;
                }


            },
            update:function () {
                if(this.air.districtid==0){
                    alert("请选择区域!");
                    return false;
                }
                if(this.air.monitortime==null){
                    alert("请输入日期格式!");
                    return false;
                }else{
                    var pattern=/^((((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13578]|1[02])(\/|\-)(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13456789]|1[012])(\/|\-)(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)0?2(\/|\-)(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;
                    if(pattern.test(this.air.monitortime)==false){
                        alert("请输入正确的日期格式，如 2013-02-04。");
                        return false;
                    }
                }
                if(this.air.pm10<=0){
                    alert("请输入pm10值!");
                    return false;
                }
                if(this.air.pm25<=0){
                    alert("请输入pm25值!");
                    return false;
                }
                if(this.air.monitoringstation.length<=0){
                    alert("请输入监测站!");
                    return false;
                }
                axios.post("/saveAir",this.air).then(res=>{})
                this.air={id:null,districtid:0,monitortime:null,pm10:0,pm25:0,monitoringstation:""}
                $("#update").modal("hide");
                this.queryAll();
            }
            ,
            add:function () {
                if(this.air.districtid==0){
                    alert("请选择区域!");
                    return false;
                }
                if(this.air.monitortime==null){
                    alert("请输入日期格式!");
                    return false;
                }else{
                    var pattern=/^((((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13578]|1[02])(\/|\-)(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13456789]|1[012])(\/|\-)(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)0?2(\/|\-)(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;
                    if(pattern.test(this.air.monitortime)==false){
                        alert("请输入正确的日期格式，如 2013-02-04。");
                        return false;
                    }
                }
                if(this.air.pm10<=0){
                    alert("请输入pm10值!");
                    return false;
                }
                if(this.air.pm25<=0){
                    alert("请输入pm25值!");
                    return false;
                }
                if(this.air.monitoringstation.length<=0){
                    alert("请输入监测站!");
                    return false;
                }
                axios.post("/saveAir",this.air).then(res=>{})
                this.air={id:null,districtid:0,monitortime:null,pm10:0,pm25:0,monitoringstation:""}
                $("#AddModal").modal("hide");
                this.queryAll();
            }
        },filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d /*+ ' ' + h + ':' + m + ':' + s*/;
            }

        }


    })

    // 数字补0操作
    function  addZero(num) {
        return num < 10 ? '0' + num : num;
    }

    function formatDateTime (date) {
        var time = new Date(Date.parse(date));
        time.setTime(time.setHours(time.getHours() + 8));
        var Y = time.getFullYear() + '-';
        var  M = this.addZero(time.getMonth() + 1) + '-';
        var D = this.addZero(time.getDate()) + '';
        return Y + M + D;
        // }
    }
</script>